<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React</title>
    <!-- 样式 -->
    <style>
        .p-color {
            color: red
        }
    </style>
</head>

<body>
    <!-- 根节点(容器节点) -->
    <div id="root"></div>

    <!-- 导入 React 和 ReactDOM 这两个核心包 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

    <script>

        // 创建一个包含 ‘月薪过万’ 的p标签
        // const pTag = React.createElement('p', null, '月薪过万')
        // ReactDOM.render(pTag, document.getElementById('root'))

        // 拓展: 给p标签添加一个id=123的属性
        // const pTag = React.createElement('p', {id:123}, '月薪过万')
        // ReactDOM.render(pTag, document.getElementById('root'))

        // 拓展: 给p标签添加一个class选择器，并将字体颜色设置为‘red’
        // const pTag = React.createElement('p', {id:123, className:'p-color'}, '月薪过万')
        // ReactDOM.render(pTag, document.getElementById('root'))

        // 拓展：创建一个div标签，包含上面创建的p标签
        // const pTag = React.createElement('p', {id:123, className:'p-color'}, '月薪过万')
        // const divTag = React.createElement('div', null, pTag)
        // ReactDOM.render(divTag, document.getElementById('root'))

        // 探索：创建一个非w3c规范的html标签会怎样？
        // const test = React.createElement('test', null, 'test')
        // ReactDOM.render(test, document.getElementById('root'))

        // 探索：React.createElement()第三个及以后参数
        // const el = React.createElement('div', null, React.createElement('p', {id:123, className:'pColor'}, '月薪过万'))
        // ReactDOM.render(el, document.getElementById('root'))

    </script>


</body>

</html>